<template>
    <div :style="{backgroundColor:bgColor}" class="scrollChart">
        <dv-scroll-ranking-board :config="config" :style="{width:width,height: height}"/>
    </div>
</template>

<script>
export default {
    name: 'scrollChart.vue',
    props: {
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '200px'
        },
        bgColor:{
          type:String,
          default:'#313354'
        },
        dataChart: {
            type: Array,
            default: () => [
                {
                    name: '周口',
                    value: 55
                },
                {
                    name: '南阳',
                    value: 120
                },
                {
                    name: '西峡',
                    value: 78
                },
                {
                    name: '驻马店',
                    value: 66
                },
                {
                    name: '新乡',
                    value: 80
                },
                {
                    name: '信阳',
                    value: 45
                },
                {
                    name: '漯河',
                    value: 29
                },
            ]
        },
        unit:{
            type:String,
            default:'千克'
        }
    },
    data() {
        return {
            config: {
                data: this.dataChart,
                align: ['center'],
                unit:this.unit
            }
        }
    }
}
</script>

<style scoped>
.scrollChart{
    padding: 30px;
}
</style>
